<template>
  <div class="Game">
    <transition name="fade">
      <Logo v-if="gameStage == 0" />
      <StartPage v-if='gameStage == 1' />
      <Deploy v-if='gameStage == 2' />
    </transition>
    <p>当前游戏状态：{{ gameStage }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Logo from './Logo.vue'
import StartPage from './StartPage.vue'
import Deploy from './Deploy.vue'

export default {
  computed: mapState({
    gameStage: state => state.gameStage.stage
  }),
  methods: mapActions([
  ]),
  created () {
    // this.$store.dispatch('currentStage')
  },
  components: {Logo, StartPage, Deploy}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
